<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Object.defineProperty</title>
</head>

<body>

</body>
<script>
    // Object.defineProperty: 它是 vue 2.x 中实现双向绑定的最关键的方法
    //  作用：
    //      可以在给对象设置属性 & 取出属性时 触发一些方法
    var obj = {}
    // 给 obj 中的 name 添加 Object.defineProperty（将来给 name 属性时触发一个方法，将来给 name 取值时触发一个方法）
    Object.defineProperty(obj, 'name', {
        // 当给 obj 的 name 赋值时会触发 set 方法
        set: function (value) {
            console.log('set：存值')
            // 将设置的值保存起来
            this._name = value
            console.log('赋值的结果为：' + value)
        },
        // 当给 obj 的 name 取值时会触发 get 方法
        get: function () {
            console.log('get：取值')
            // 将之前保存的数据取出来
            return this._name
        }
    })

    // obj.name = "xjj"
    // console.log(obj.name)
</script>

</html>